<h2 class="margin-bottom-xs margin-top-xs"><strong class="margin-right">4.</strong>Choose Domain</h2>
<div>
    <form class="form-horizontal flex-form" role="form" data-bind="with: model.domain, submit: save">
        <div class="panel padding-md">
            <div class="form-group row" data-bind="validationOptions: { insertMessages: false }, validationElement: domain">                
                <label class="control-label">Domain<i class="required"></i></label>
                <div class="flex-horizontal col-sm-6">
                    <div class="flex-grow">
                        <div class="dropdown btn-block">
                            <input type="text" class="form-control dropdown-toggle" autocomplete="off"
                                   placeholder="Enter domain" data-toggle="dropdown"
                                   data-bind="textInput: domain, attr: { id: 'domainInput' }" />
                            <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
                            <ul class="dropdown-menu" role="menu"
                                data-bind="autoComplete: '#domainInput', foreach: $root.createDomainNameAutocompleter(domain)">
                                <li role="presentation" data-bind="click: $parent.domain.bind($parent, $data)">
                                    <a role="menuitem" tabindex="-1" href="#">
                                        <span data-bind="text: $data"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: domain">
                            <div class="help-block" data-bind="validationMessage: domain"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row" data-bind="visible: availableRootDomains().length > 1, validationOptions: { insertMessages: false }, validationElement: rootDomain">
                <label class="control-label">Root Domain<i class="required"></i></label>
                <div class="flex-horizontal col-sm-6">
                    <div class="flex-grow">
                        <div class="dropdown btn-block">
                            <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown">
                                <span data-bind="text: rootDomain() || 'Select root domain'"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: availableRootDomains">
                                <li>
                                    <a href="#" data-bind="text: $data, click: $parent.rootDomain.bind($parent, $data)"></a>
                                </li>
                            </ul>
                        </div>
                        <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: rootDomain">
                            <div class="help-block" data-bind="validationMessage: rootDomain"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="control-label">Full domain</label>
                <div class="col-sm-8">
                    <p class="form-control-static">
                        <span data-bind="visible: !domain()">&lt;Select domain&gt;</span>
                        <strong data-bind="visible: !domain(), text: '.' + rootDomain()"></strong>
                        <strong data-bind="visible: domain(), text: fullDomain"></strong>
                    </p>
                </div>
            </div>
            <div class="form-group row" data-bind="visible: availableEmails().length === 1">
                <label class="control-label">Email</label>
                <div class="col-sm-8">
                    <p class="form-control-static">
                        <strong data-bind="text: availableEmails()[0]"></strong>
                    </p>
                </div>
            </div>            
            <div class="form-group row" data-bind="visible: availableEmails().length > 1, validationOptions: { insertMessages: false }, validationElement: userEmail">
                <label class="control-label">Email<i class="required"></i></label>
                <div class="flex-horizontal col-sm-6">
                    <div class="flex-grow ">
                        <div class="dropdown btn-block">
                            <button class="btn btn-block dropdown-toggle text-left" type="button" data-toggle="dropdown">
                                <span data-bind="text: userEmail() || 'Select E-mail'"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: availableEmails">
                                <li>
                                    <a href="#" data-bind="text: $data, click: $parent.userEmail.bind($parent, $data)"></a>
                                </li>
                            </ul>
                        </div>
                        <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: userEmail">
                            <div class="help-block" data-bind="validationMessage: userEmail"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="navigation margin-top margin-bottom flex-horizontal">
            <button type="button" class="btn btn-default" data-bind="click: $root.back">
                <i class="icon-arrow-left"></i><span>Back</span>
            </button>
            <div class="flex-separator"></div>
            <button type="submit" class="btn btn-primary" data-bind="css: { 'btn-spinner': $root.spinners.save() }, disable: $root.spinners.save">
                <span>Next</span> <i class="icon-arrow-right"></i>
            </button>
        </div>
    </form>
</div>

